<script setup lang="ts">

import { RouterLink, RouterView } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { reactive } from 'vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const bg = reactive({
  Name: localStorage.getItem("Name") ?? "",
  Role_Id: localStorage.getItem("role_Id") ?? "",
})
</script>
<template>
  <div class="common-layout" style="width: 100%;height: 100%;">
   
    <el-container>
      <el-header>

        <span v-if="bg.Role_Id.toString() == '4'" style="color: #f1f2f7;">部门领导:{{ bg.Name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<RouterLink to="/">退出登录</RouterLink></span>
        <span v-else style="color: #f1f2f7;">登录人:{{ bg.Name }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<RouterLink to="/">退出登录</RouterLink></span>
      
      </el-header>
      <el-container>

        <el-aside>
          <el-row class="tac">
            <el-col :span="12">
              <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" >

                <el-sub-menu index="1">
                  <template #title>
                    <el-icon>
                      <location />
                    </el-icon>
                    <h3 style="color: black;">溯源管理</h3>
                  </template>
                  <el-menu-item-group title="" style="background: #f1f2f7;">
                    <el-menu-item index="21-1">
                      <el-sub-menu index="1-1">
                        <template #title>
                          <el-icon>
                            <location />
                          </el-icon>
                          <span>
                            <RouterLink to="/ShowRabits" style="color: black;">溯源管理-增删改</RouterLink>
                          </span>
                        </template>
                      </el-sub-menu>
                    </el-menu-item>

                    <el-menu-item index="21-2">
                      <el-sub-menu index="1-2">
                        <template #title>
                          <el-icon>
                            <location />
                          </el-icon>
                          <span>
                            <RouterLink to="/FarmingsAll" style="color: black;">溯源管理-溯源详情-养殖信息</RouterLink>
                          </span>
                        </template>
                      </el-sub-menu>
                    </el-menu-item>

                    <el-menu-item index="21-3">
                      <el-sub-menu index="1-3">
                        <template #title>
                          <el-icon>
                            <location />
                          </el-icon>
                          <span>
                            <RouterLink to="/AddApp" style="color: black;">用户新增</RouterLink>
                          </span>
                        </template>
                      </el-sub-menu>
                    </el-menu-item>

                  </el-menu-item-group>

                  <el-sub-menu index="2" style="background: #f1f2f7;">
                    <template #title>
                      <el-icon>
                        <location />
                      </el-icon>
                      <h4 style="color: black;">菜单</h4>
                    </template>
                    <el-menu-item-group title="" style="background: #f1f2f7;">

                      <el-menu-item index="22-2">
                        <el-sub-menu index="2-2">
                          <template #title>
                            <el-icon>
                              <location />
                            </el-icon>
                            <span>
                              <RouterLink to="/Menus" style="color: black;">菜单页</RouterLink>
                            </span>
                          </template>
                        </el-sub-menu>
                      </el-menu-item>

                      <el-menu-item index="22-3">
                        <el-sub-menu index="2-3">
                          <template #title>
                            <el-icon>
                              <location />
                            </el-icon>
                            <span>
                              <RouterLink to="/RoleMenus" style="color: black;">角色菜单页</RouterLink>
                            </span>
                          </template>
                        </el-sub-menu>
                      </el-menu-item>

                      <el-menu-item index="22-4">
                        <el-sub-menu index="2-4">
                          <template #title>
                            <el-icon>
                              <location />
                            </el-icon>
                            <span>
                              <RouterLink to="/Reverso" style="color: black;">请假表</RouterLink>
                            </span>
                          </template>
                        </el-sub-menu>
                      </el-menu-item>

                      <el-menu-item index="22-5">
                        <el-sub-menu index="2-5">
                          <template #title>
                            <el-icon>
                              <location />
                            </el-icon>
                            <span>
                              <RouterLink to="/NlogsAll" style="color: black;">测试</RouterLink>
                            </span>
                          </template>
                        </el-sub-menu>
                      </el-menu-item>

                    </el-menu-item-group>
                  </el-sub-menu>
                </el-sub-menu>

              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>

          <RouterView />

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-header {
  height: 100px;
  background: black;
}

.el-aside {
  height: 100%;
  background: #f1f2f7!important;
}

.el-header {
  height: 60px;
  background: black;
  color: #f1f2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  width: 6000px;
}

.el-aside {
  height: calc(100vh - 60px);
  /* 减去header高度 */
  background: black;
  overflow: auto;
}

.el-menu-vertical-demo {
  border-right: none;
  /* 移除右侧边框 */
  background: #f1f2f7 !important;
}

.el-menu-item,
.el-sub-menu__title {
  color: #222 !important;
  background: #f1f2f7 !important;
  padding: 12px 20px !important;
}

.el-sub-menu__icon-arrow {
  color: #f1f2f7 !important;
}

.el-menu-item.is-active,
.el-sub-menu__title.is-active {
  background: #f1f2f7 !important; /* 可选：高亮选中项 */
  color: #409EFF !important;
}

.el-menu-item-group__title {
  color: #222 !important;
  background: #f1f2f7 !important;
}

@media (min-width: 500px) {
  .el-aside {
    width: 300px;
  }
}

/* 全局设置 */
</style>
